<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8" />
		<title>锋迷五子棋游戏-登录页面</title>
		<!-- 样式标签 -->
		<style>
			.body_class{
				height: 100%;
				background-image: url(img/background.jpeg);
				background-size: 100% 100%;
				display: flex;/*设置当前的标签为 弹性盒子模型**/
				flex-direction: row;/*水平排列**/
				align-items: center;/*纵向居中**/
				justify-content: center; /*横向居中**/
			}
			
			.main_div{
				width: 400px;
				height: 250px;
				background-color: bisque;
				border-radius: 10px;
				box-shadow: 10px 10px 10px #888888;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.title_span {
				margin-top: 30px;
				font-size: 25px;
				font-family: "楷体";
				text-shadow: 5px 5px 5px black;
			}
			
			.item_div {
				margin-top: 15px;
			}
			
			.item_div3{
				margin-top: 15px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			
			.div_bottom {
				margin-top: 20px;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
			}
			
			button {
				width: 34%;
				height: 100%;
			}
		</style>
		<!-- js -->
		<script src="js/jquery.js"></script>
		<script>
			//全局变量
			var codeKey;
			
			//页面加载时触发
			$(function(){
				//生成一个随机的key
				codeKey = Math.random() * 100000;
				//生成验证码
				createCode();
			});
			
			
			//去到注册页面
			function goRegisterPage(){
				//跳转到注册页面
				location.href="register.html"
			}
			
			//重新生成验证码
			function createCode(){
				//给image标签重新设置src属性，发送请求
				$("#codeImg")
				.attr("src", "http://localhost:8080/user/code?codekey=" + codeKey + "&time=" + new Date().getTime());
			}
			
			//登录的方法
			function login(){
				var username = $("#username").val();
				var password = $("#password").val();
				var code = $("#code").val();
				
				//前端校验
				
				//ajax请求后端进行登录
				$.ajax({
					type: "POST",
					url: "http://localhost:8080/user/login",
					data: {
						username: username,
						password: password,
						codekey: codeKey,
						code: code
					},
					success: function(data){
						//登录结果的反馈
						//JSON.stringify - JS的对象 转换成为字符串
						//js - 非null的对象，默认为true，否则就是false
						if(data){
							if(data.username == "-1") {
								alert("验证码错误");
								return;
							}
							
							//登录成功
							//alert("登录成功！");
							
							//保证登录凭证（id、用户名、昵称、头像）
							//id
							localStorage.setItem("uid", data.id);
							localStorage.setItem("username", data.username);
							localStorage.setItem("nickname", data.nickname);
							localStorage.setItem("header", data.header);
							localStorage.setItem("happyBean", data.happyBean);
							
							//跳转到游戏页面
							location.href="gamehome.html";
						} else {
							//登录失败
							alert("用户名或者密码错误！");
						}
					}
				});
			}
			
			/**
			 * 跳转到忘记密码的页面
			 */
			function forgetPassword(){
				location.href="forgetpassword.html";
			}
		</script>
	</head>
	<!-- 网页体 -->
	<body class="body_class">
		
		<!-- 登录注册的背景框 -->
		<div class="main_div">
			
			<span class="title_span">锋迷五子棋游戏</span>
			
			<div class="item_div">
				账号：<input id="username" placeholder="请输入用户名"/>
			</div>
			
			<div class="item_div">
				密码：<input id="password" type="password" placeholder="请输入密码"/>
			</div>
			
			<div class="item_div3">
				验证码：<input id="code" style="width: 40px;"/> 
				<img 
				    id="codeImg"
					src="http://localhost:8080/user/code" 
					onclick="createCode()"
					style="width: 80px; height: 50px; background-color: #888888; margin-left: 10px;"/>
			</div>
			
			<div class="div_bottom">
				<button onclick="login()">登录</button>
				<button onclick="goRegisterPage()">去注册</button>
				<button onclick="forgetPassword()">忘记密码？</button>
			</div>
		</div>
		
	</body>
</html>
